<template>
  <span>
    <el-container>
      <my-component-header />
      <el-main style="padding: 0px 100px">
        <div class="nav_menu">
          <my-component-navmenu />
          <my-component-breadcrumb :name="'流量套餐'" />
          <div class="phone_details_content">
            <el-card
              class="card_image"
              style="width: 300px"
              :body-style="{ padding: '0px' }"
            >
              <img
                :src="getCharIconSrc('traffic', traffic.trafficname)"
                class="image"
              />
            </el-card>
            <el-card class="box-card">
              <div style="font-size: 20px">
                {{ traffic.traffictitle }}
              </div>

              <div class="phone_number">
                <span>流量类型: </span>
                <span>
                  <el-tag type="primary" effect="dark">
                    {{ traffic.traffictype }}
                  </el-tag>
                </span>
              </div>

              <div class="phone_supplier">
                <span>供应商: </span>
                <span>
                  <el-tag type="primary" effect="dark">
                    {{ suppliername }}
                  </el-tag>
                  <el-tag type="danger" effect="dark"> 免费配送 </el-tag>
                  <el-tag type="danger" effect="dark"> 售后服务 </el-tag>
                </span>
              </div>

              <div class="phone_number">
                <span>数量: </span>
                <span>
                  <el-input-number
                    v-model="traffic.number"
                    controls-position="right"
                    @change="handleChange"
                    :min="1"
                    :max="1"
                  ></el-input-number>
                </span>
              </div>

              <div style="padding: 14px">
                <div class="price">
                  <span class="original_price"
                    >￥ {{ traffic.originalprice }}
                  </span>
                  <span class="discount_price"
                    >￥ {{ traffic.discountprice }}</span
                  >
                </div>
              </div>

              <div>
                <el-button @click="changeOrderVisible(true)" type="primary">
                  <i class="el-icon-goods"></i>
                  <span> 立即购买</span>
                </el-button>
              </div>
            </el-card>

            <my-component-order
              :orderVisible="orderVisible"
              :product="traffic"
              :type="type"
            />
          </div>
        </div>
      </el-main>
      <el-footer>
        <my-component-footer />
      </el-footer>
    </el-container>
  </span>
</template>

<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue";
import Footer from "../../components/Footer.vue";
import Order from "../../components/Order.vue";
import Breadcrumb from "../../components/Breadcrumb";
import { selectTrafficById } from "../../api/traffic";
import { selectSupplierById } from "../../api/phone";
import baseMixin from "../../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  components: {
    "my-component-header": Header,
    "my-component-navmenu": NavMenu,
    "my-component-footer": Footer,
    "my-component-order": Order,
    "my-component-breadcrumb": Breadcrumb,
  },
  data() {
    return {
      defaultActivate: "1",
      traffic: {},
      phonesize: "",
      phonecolor: "",
      newOrderForm: {},
      paytype: "线上支付",
      delivery: "送货上门",
      rules: {},
      options: regionData,
      selectedOptions: [],
      orderVisible: false,
      type: "traffic",
      suppliername: "",
    };
  },
  methods: {
    handleChange(value) {
      this.traffic.number = value;
    },
    handleChange(value) {
      let province = CodeToText[value[0]];
      let city = CodeToText[value[1]];
      let district = CodeToText[value[2]];
      console.log(value); // ["110000", "110100", "110101"]
      //CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
      console.log(); //北京市 市辖区 东城区
    },
  },
  created() {
    let dataObjFromIndex = this.$route.params;
    let trafficid = dataObjFromIndex.id;
    selectTrafficById(trafficid)
      .then(async (res) => {
        this.traffic = res.data;
        this.traffic.number = 1;
        let _this = this;
        await selectSupplierById(this.traffic.supplierid)
          .then((res) => {
            _this.suppliername = res.data.suppliername;
          })
          .catch((err) => {
            this.$message.error(err);
          });
      })
      .catch((err) => {
        this.$message.error(err);
      });
  },
};
</script>

<style lang="scss">
@import "../../assets/css/global.scss";
@import "../../assets/css/product_details.scss";
</style>